<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">网络资源详情</x-header>
    <div class="content pad">
      <x-table :cell-bordered="false" style="background-color:#fff;">
        <thead>
          <tr>
            <th style="width:4em;">地域</th>
            <th>设备名称</th>
            <th>包机人(电话)</th>
          
          </tr>
        </thead>
        <tbody>
          <tr v-for="(x,i) of items" :key="i" style="line-height:1.5em;">
            <td><div style="width:5em;">{{x.address_info}}</div></td>
            <td style="width:6em;">{{x.dev_name}}</td>
            <td>
              <div>{{x.w_name}}</div>
              <div>{{x.w_phone}}</div>
            </td>
        
           
          </tr>
         
        </tbody>
      </x-table>
    </div>
  </div>
</template>

<script>
import { XHeader, XTable } from "vux";
export default {
  data() {
    return {
      source: this.$route.params["source"] || "XDL",
      code1: this.$route.params["code1"] || "0",
      code2: this.$route.params["code2"] || "0",
      code3: this.$route.params["code3"] || "",
      items: []
    };
  },
  mounted() {
    this.$vux.loading.show({
      text: "Loading"
    })
    this.$store
      .dispatch("resource_status_pro_detail", {
        code1: this.code1,
        code2: this.code2,
        code3: this.code3,
        source: this.source
      })
      .then(resp => {
        this.items = resp.data
        this.$vux.loading.hide()
      });
  },
  methods: {},
  components: {
    XHeader,
    XTable
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  .sub-title {
    font-size: 0.8em;
  }
  i {
    margin-left: 10px;
  }
  .btn {
    margin-top: 0.2em;
    padding: 0.1em 0.6em 0.3em;
    border: 1px solid #3fc7ff;
    border-radius: 0.7em;
    width: 3.5em;
    text-align: center;
  }
}
td {
  padding: 1em 0.1em;
}
</style>